<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="./ajax/js/jquery.js"></script>
    <link rel="stylesheet" href="./tianqi.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body style="font-family:Microsoft YaHei;">
<div class="a ">
    <div class="b">
        <div class="c">
            <p style="color: white;text-shadow:1px 1px #8f8f8f; font-size: 18px;"><b  id="s">2015-10-25</b></p>
            <div style="color: white;text-shadow:1px 1px #8f8f8f; font-size: 18px;">
                <div id="clock">
                    <b> --:--:--</b>
                </div>
            </div>
            <p style="color: white;text-shadow:1px 1px #8f8f8f; font-size: 18px;margin-top: 4%;"><b>选择城市:</b><b id="wwww">绵阳</b></p>
            <div  style="margin-top: -4%;">
                <div style="position: relative;">
                    <img id="rrr" style="width: 34%;height: 34%;margin-top:4%;" src="./img/sun.png">
                </div>
            </div>
            <p style="margin-top: -2%;color: #faff74;text-shadow:1px 1px #8f8f8f; font-size: 24px;"><b id="ww">14</b>℃～<b id="w">49</b>℃</p>
            <p  style="color: white;text-shadow:1px 1px #8f8f8f; font-size: 18px;"><b id="www" ></b></p>
            <p  style="color: white;text-shadow:1px 1px #8f8f8f; font-size: 18px;"><b id="ss">龙卷风</b> <b id="sss">8-9</b><b>级</b></p>
        </div>
    </div>
    <div class="d">
        <div class="e">
            <div style="width: 100%;height: 100%;">
                <p style="padding-top: 3%;float: left;margin-left:4%;color: white;text-shadow:1px 1px #8f8f8f; font-size: 18px;float: left;"><b  id="two">2015-10-25</b></p>
                <p style="padding-top: 3%;float: left;margin-left:4%;color: #faff74;text-shadow:1px 1px #8f8f8f; font-size: 18px;float: left;"><b id="twoo">14</b>℃～<b id="twooo">49</b>℃</p>
                <p  style="padding-top: 3%;float: left;margin-left:4%;color: white;text-shadow:1px 1px #8f8f8f; font-size: 18px;float: left;"><b id="twoooo" >冰雹</b></p>
                <div style="width: 12%;height: 100%;float: right;"></div>
            </div>
        </div>
        <div class="f">
            <div style="padding-top: 3%;width: 100%;height: 100%;">
                <p style="margin-left:4%;color: white;text-shadow:1px 1px #8f8f8f; font-size: 18px;float: left;"><b  id="f">2015-10-25</b></p>
                <p style="margin-left:4%;color: #faff74;text-shadow:1px 1px #8f8f8f; font-size: 18px;float: left;"><b id="ff">14</b>℃～<b id="fff">49</b>℃</p>
                <p  style="margin-left:4%;color: white;text-shadow:1px 1px #8f8f8f; font-size: 18px;float: left;"><b id="ffff" >冰雹</b></p>
            </div>
        </div>
        <div class="g">
            <div style="padding-top: 3%;">
                <p style="margin-left:4%;color: white;text-shadow:1px 1px #8f8f8f; font-size: 18px;float: left;"><b  id="g">2015-10-25</b></p>
                <p style="margin-left:4%;color: #faff74;text-shadow:1px 1px #8f8f8f; font-size: 18px;float: left;"><b id="gg">14</b>℃～<b id="ggg">49</b>℃</p>
                <p  style="margin-left:4%;color: white;text-shadow:1px 1px #8f8f8f; font-size: 18px;float: left;"><b id="gggg" >冰雹</b></p>
            </div>
        </div>
        <div class="h">
            <div style="padding-top: 3%;">
                <p style="margin-left:4%;color: white;text-shadow:1px 1px #8f8f8f; font-size: 18px;float: left;"><b  id="h">2015-10-25</b></p>
                <p style="margin-left:4%;color: #faff74;text-shadow:1px 1px #8f8f8f; font-size: 18px;float: left;"><b id="hh">14</b>℃～<b id="hhh">49</b>℃</p>
                <p  style="margin-left:4%;color: white;text-shadow:1px 1px #8f8f8f; font-size: 18px;float: left;"><b id="hhhh" >冰雹</b></p>
            </div>
        </div>
        <div class="i">
            <div style="padding-top: 3%;">
                <p style="margin-left:4%;color: white;text-shadow:1px 1px #8f8f8f; font-size: 18px;float: left;"><b  id="i">2015-10-25</b></p>
                <p style="margin-left:4%;color: #faff74;text-shadow:1px 1px #8f8f8f; font-size: 18px;float: left;"><b id="ii">14</b>℃～<b id="iii">49</b>℃</p>
                <p  style="margin-left:4%;color: white;text-shadow:1px 1px #8f8f8f; font-size: 18px;float: left;"><b id="iiii" >冰雹</b></p>
            </div>
        </div>
        <div class="j">
            <div style="padding-top: 3%;">
                <p style="margin-left:4%;color: white;text-shadow:1px 1px #8f8f8f; font-size: 18px;float: left;"><b  id="j">2015-10-25</b></p>
                <p style="margin-left:4%;color: #faff74;text-shadow:1px 1px #8f8f8f; font-size: 18px;float: left;"><b id="jj">14</b>℃～<b id="jjj">49</b>℃</p>
                <p  style="margin-left:4%;color: white;text-shadow:1px 1px #8f8f8f; font-size: 18px;float: left;"><b id="jjjj" >冰雹</b></p>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    function test() {
        $.ajax({
            url: 'https://api.heweather.com/x3/weather',
            type: "get",
            data: {
                city: "绵阳",
                key: "e02cab9d59fa44b39ebe57038d7c20ae",
                key:"476a06405ee61686d7686b1b79db9b97"
            },
            dataType: 'json',
            success: function (res) {
                try{
                    $("#w").html(res["HeWeather data service 3.0"][0].daily_forecast[0].tmp.max);
                    $("#www").html(res["HeWeather data service 3.0"][0].daily_forecast[0].cond.txt_n);
                    $("#ww").html(res["HeWeather data service 3.0"][0].daily_forecast[0].tmp.min);
                    $("#s").html(res["HeWeather data service 3.0"][0].daily_forecast[0].date);
                    $("#sss").html(res["HeWeather data service 3.0"][0].daily_forecast[0].wind.sc);
                    $("#ss").html(res["HeWeather data service 3.0"][0].daily_forecast[0].wind.dir);
                    $("#two").html(res["HeWeather data service 3.0"][0].daily_forecast[1].date);
                    $("#twooo").html(res["HeWeather data service 3.0"][0].daily_forecast[1].tmp.max);
                    $("#twoo").html(res["HeWeather data service 3.0"][0].daily_forecast[1].tmp.min);
                    $("#twoooo").html(res["HeWeather data service 3.0"][0].daily_forecast[1].cond.txt_n);
                    $("#f").html(res["HeWeather data service 3.0"][0].daily_forecast[2].date);
                    $("#fff").html(res["HeWeather data service 3.0"][0].daily_forecast[2].tmp.max);
                    $("#ff").html(res["HeWeather data service 3.0"][0].daily_forecast[2].tmp.min);
                    $("#ffff").html(res["HeWeather data service 3.0"][0].daily_forecast[2].cond.txt_n);
                    $("#g").html(res["HeWeather data service 3.0"][0].daily_forecast[3].date);
                    $("#ggg").html(res["HeWeather data service 3.0"][0].daily_forecast[3].tmp.max);
                    $("#gg").html(res["HeWeather data service 3.0"][0].daily_forecast[3].tmp.min);
                    $("#gggg").html(res["HeWeather data service 3.0"][0].daily_forecast[3].cond.txt_n);
                    $("#h").html(res["HeWeather data service 3.0"][0].daily_forecast[4].date);
                    $("#hhh").html(res["HeWeather data service 3.0"][0].daily_forecast[4].tmp.max);
                    $("#hh").html(res["HeWeather data service 3.0"][0].daily_forecast[4].tmp.min);
                    $("#hhhh").html(res["HeWeather data service 3.0"][0].daily_forecast[4].cond.txt_n);
                    $("#i").html(res["HeWeather data service 3.0"][0].daily_forecast[5].date);
                    $("#iii").html(res["HeWeather data service 3.0"][0].daily_forecast[5].tmp.max);
                    $("#ii").html(res["HeWeather data service 3.0"][0].daily_forecast[5].tmp.min);
                    $("#iiii").html(res["HeWeather data service 3.0"][0].daily_forecast[5].cond.txt_n);
                    $("#j").html(res["HeWeather data service 3.0"][0].daily_forecast[6].date);
                    $("#jjj").html(res["HeWeather data service 3.0"][0].daily_forecast[6].tmp.max);
                    $("#jj").html(res["HeWeather data service 3.0"][0].daily_forecast[6].tmp.min);
                    $("#jjjj").html(res["HeWeather data service 3.0"][0].daily_forecast[6].cond.txt_n);
                    if (res["HeWeather data service 3.0"][0].daily_forecast[0].cond.txt_n==="多云")
                    {
                        $("#rrr").attr("src","./img/tianqi4.png");
                    }
                    if (res["HeWeather data service 3.0"][0].daily_forecast[0].cond.txt_n==="晴")
                    {
                        $("#rrr").attr("src","./img/imgtp.png");
                    }
                    if (res["HeWeather data service 3.0"][0].daily_forecast[0].cond.txt_n==="小雨")
                    {
                        $("#rrr").attr("src","./img/tianqi1.png");
                    }
                    if (res["HeWeather data service 3.0"][0].daily_forecast[0].cond.txt_n==="阴")
                    {
                        $("#rrr").attr("src","./img/tianqi3.png");
                    }
                    if (res["HeWeather data service 3.0"][0].daily_forecast[0].cond.txt_n==="中雨")
                    {
                        $("#rrr").attr("src","./img/tianqi6.png");
                    }
                    if (res["HeWeather data service 3.0"][0].daily_forecast[0].cond.txt_n==="大雨")
                    {
                        $("#rrr").attr("src","./img/tianqi9.png");
                    }

                }
                catch(err){
                    setTimeout(function(){
                        test()
                    },300)
                    console.log(err.message+"正在重新请求")
                }

            }
        })
    }
    test();
    function kate() {

        var date=new Date();
        var h=date.getHours();
        var m=date.getMinutes();
        var s=date.getSeconds();

        var time=h+":"+m+":"+s;
        var clock = document.getElementById("clock");
        clock.innerText=time;
    }
    kate();
    setInterval(kate,1000 );
</script>
</html>